<template>
    <div class="page-work-index">
        <div class="app-board">
            <div class="content">
                <el-popover
                width="200"
                trigger="hover">
                    <img :src="userQrcode" alt="">
                    <div class="qrcode" slot="reference">
                        <i class="iconfont icon-qrcode"></i>
                    </div>
                </el-popover>

                <div class="avatar">
                    <img v-lazy="userInfo.headimgurl" alt="">
                </div>
                <div class="nameinfo">
                    {{userInfo.userName}}
                    <i class="iconfont icon-logout logout" @click="logout"></i>
                </div>
                <!-- <div class="datainfo">
                    接单 258 &emsp; | &emsp; 收藏258
                </div> -->
                
                <ul class="app-menus">
                    <li class="menu" v-for="item in menus" :key="item.path">
                        <router-link :to="{name: item.name}">
                            {{item.label}}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>

        <router-view class="app-view"></router-view>

        <!-- 引导图层 -->
        <div class="app-guide-modal" v-if="showGuide">
            <div class="qrcode">
                <i class="el-icon-close" @click="onCloseGuide"></i>
                <img class="img" :src="userQrcode" width="200">
                快速关联约个设计公众号 <br> 随手了解最新动态

                <a @click="onCloseGuide">以后再说</a>
                <img class="arr" src="../assets/img/wx_qrcode_arr.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import { logout } from '../api/user'
export default {
    name: 'workApp',
    data(){
        return {
            menus: [
                {
                    name: 'myBook',
                    label: '我收到的预约'
                },
                {
                    name: 'myPicture',
                    label: '我的图集'
                },
                {
                    name: 'myProfile',
                    label: '个人资料'
                },
                {
                    name: 'myAdviser',
                    label: '我的顾问'
                }
            ],
            showGuide: true,
            userQrcode: localStorage.userQrcode
        }
    },
    computed: {
        userInfo(){
            return localStorage.userInfo ? JSON.parse(localStorage.userInfo) : {}
        }
    },
    methods: {
        onCloseGuide(){
            this.showGuide = false
            localStorage.showGuide = 'close'
        },
        logout(){
            logout()
        }
    },
    created(){
        if(!localStorage.showGuide){
            this.showGuide = true
        }else{
            this.showGuide = false
        }
    }
}
</script>

<style lang="less">
.app-guide-modal{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.6);
    .qrcode{
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 30px;
        background-color: #fff;
        border-radius: 10px;
        text-align: center;
        color: #707070;
        font-size: 12px;
        line-height: 1.8;
        &>i{
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 30px;
            color: #333;
            cursor: pointer;
        }
        &>a{
            display: block;
            margin: 30px auto 0;
            font-size: 15px;
            text-decoration: underline;
            cursor: pointer;
        }
        .img{
            display: block;
        }
        .arr{
            position: absolute;
            top: -190px; right: -196px;
            width: 166px;
            transform: rotate(10deg);
        }
    }
}
.page-work-index{
    min-height: 100%;
    font-size: 14px;
    background-color: #f7f8f9;
    .app-board{
        color: #fff;
        background-color: @primary;
        .content{
            max-width: 1000px;
            margin: 0 auto;
            padding-top: 40px;
            position: relative;
            .avatar{
                width: 80px;
                height: 80px;
                border-radius: 50%;
                overflow: hidden;
                box-shadow: 0 0 3px rgba(255,255,255,.3);
                margin: 0 auto 10px;
                &>img{
                    display: block;
                }
            }
            .nameinfo{
                margin: 20px auto 10px;
                text-align: center;
                .logout{
                    cursor: pointer;
                    position: relative;
                    top: 1px;
                }
            }
            .datainfo{
                text-align: center;
                font-size: 12px;
            }
            .qrcode{
                position: absolute;
                top: 40px;
                right: 0;
                .iconfont{
                    font-size: 32px;
                    cursor: pointer;
                }
            }

            .app-menus{
                margin-top: 25px;
                display: flex;
                .menu{
                    display: block;
                    flex: 1;
                    padding: 25px;
                    &>a{
                        display: block;
                        width: 100%;
                        color: #fff;
                        font-size: 14px;
                        text-align: center;
                        padding:10px 0;
                        text-decoration: none;
                        border: 1px solid transparent;
                        &.router-link-active{
                            position: relative;
                            border-color: #fff;
                            border-radius: 20px;
                            &:after{
                                content: '';
                                position: absolute;
                                z-index: 20;
                                bottom: -36px;
                                left: 50%;
                                transform: translateX(-50%);
                                border-top: 20px solid @primary;
                                border-left: 20px solid transparent;
                                border-right: 20px solid transparent;
                            }
                        }
                    }
                }
            }
        }
    }

    .app-view{
        max-width: 1000px;
        min-height: calc(100vh - 265px);
        margin: 0 auto;
        padding: 30px 0;
        background-color: #fff;
        @media screen and (max-width: 1500px) {
            max-width: 800px;
        }
    }
}

/* common style */
.page-work-title{
    &>label{
        display: inline-block;
        padding: 0 4em 20px;
        border-bottom: 1px solid @primary;
    }
}
</style>
